<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>卖家中心</title>
	<!--获取屏幕宽度，根据屏幕宽度进行自适应-->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!--引入Bootstrap-->
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<script src="js/jquery.js"></script>
	<script src="js/bootstrap.min.js"></script>

	<!-- 引入jquery.form.js -->
	<script type="text/javascript" src="http://malsup.github.io/jquery.form.js"></script>
	<!--自定义工具-->
	<script src="js/HttpUtil.js"></script>
	<!--导入vue 包-->
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>

	<!-- 引入js layer.js-->
	<script type="text/javascript" src="js/layer.js"></script>

	<!-- 引入样式 element-ui-->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<!-- 引入组件库 element-ui-->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>


	<style>
		a:hover {
			color: #cc3333;
			text-decoration: none;
		}

		a {
			color: black;
			cursor: pointer;
		}
	</style>
</head>
<body>


<div class="container-fluid" style="margin-top: 1%">
	<!-- 头信息 -->
	<header>
		<div class="col-xs-offset-1">
			<img src="../view-api/images/vip.logo.png">
		</div>
		<hr>
		<div class="row" style="background-color: #A4D3EE">
			<div class="col-xs-2 col-lg-offset-1">
				<h3>GitBug 商城商品管理</h3>
			</div>

		</div>

	</header>

	<div class="row">
		<div class="col-xs-1 col-md-offset-1" style="background-color:whitesmoke;height:86%;position: absolute">
			<h5 style="padding:50% 0 10% 20%"><a href="home_admin.html">概况</a></h5>
			<h5 style="padding:10% 0 10% 20%"><a href="goods-manage.html">商品管理</a></h5>
			<h5 style="padding:10% 0 10% 20%"><a href="orderItems_admin.html">订单管理</a></h5>
			<h5 style="padding:10% 0 10% 20%"><a href="data_analyse.html">数据中心</a></h5>
		</div>
		<div class="col-lg-offset-2 " style="margin-top: 1%">
			<h3>个人中心&nbsp>&nbsp添加商品</h3>
			<div class="col-lg-offset-0 col-md-12 " style="padding-top:15px;border-bottom: 3px solid deeppink">

			</div>
		</div>


		<!-- 新增商品  -->

		<div class="col-lg-offset-2 col-md-9 " style="padding-top: 1%">

			<div class="row" id="add_goods_vue">
				<div class="table-responsive">
					<form class="form-horizontal" id="addImg"
								action="http://localhost/shop-admin/goods/upload"
								method="post" enctype="multipart/form-data"
								@submit.prevent="saveReport();">
						<div class="form-group">
							<label for="goodsName" class="col-sm-1 control-label">商品名称</label>
							<div class="col-sm-9">
								<input type="text" class="form-control" id="goodsName" placeholder="商品名称" v-model="goodsName"
											 :value="goodsName">
							</div>
						</div>


						<div class="form-group">
							<label for="price" class="col-sm-1 control-label">商品价格</label>
							<div class="col-sm-9">
								<input type="text" class="form-control" id="price" placeholder="商品价格" v-model="price" :value="price">
							</div>
						</div>
						<div class="form-group">
							<label for="count" class="col-sm-1 control-label">商品库存</label>
							<div class="col-sm-9">
								<input type="text" class="form-control" id="count" placeholder="商品库存" v-model="count" :value="count">
							</div>
						</div>
						<div class="form-group">
							<label for="introduction" class="col-sm-1 control-label">商品介绍</label>
							<div class="col-sm-9">
								<input type="text" class="form-control" id="introduction" placeholder="商品名称" v-model="introduction"
											 :value="introduction">
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-1 control-label">商品图片链接</label>
							<div class="col-sm-9">
								<input type="file" class="form-control" name="file" placeholder="商品图片链接"/>
								<input type="submit" name="submit" value="上传" style="padding-top: 4px"/>

							</div>


						</div>

						<div class="form-group">
							<label class="col-sm-1 control-label">商品展示图</label>
							<div class="col-sm-9">
								<img :src="showImage" alt="" width="150px" height="150px" id="showImage">
							</div>
						</div>


						<div class="form-group">
							<form class="form-horizontal">
								<label for="type" class="col-sm-1 control-label">商品类型&nbsp;&nbsp;</label>
								<div class="col-sm-9">
									<form>
										<select class="form-control" id="type" v-model="type" :value="type">
											<option value="手机">手机</option>
											<option value="笔记本">笔记本</option>
											<option value="游戏本">游戏本</option>
											<option value="游戏机">游戏机</option>
											<option value="照相机">照相机</option>
										</select>
									</form>
								</div>
							</form>
						</div>

						<div class="form-group">
							<div class="col-sm-offset-1 col-sm-10">
								<!--<template>
									<el-button :plain="true" @click="open2">上传</el-button>
								</template>-->
								<!--	<button class="button_shelves btn btn-success"  @click="addGoods()" >添加</button>-->
								<template>
									<el-button :plain="true" type="primary" icon="el-icon-check" round @click="addGoods()">添加</el-button>
								</template>

							</div>
						</div>
					</form>
				</div>
			</div>

		</div>
	</div>

</div>


<!-- 页脚信息 -->

<div class="container-fluid" style="background-color: ghostwhite; margin-top: 5%; ">
	<div class="row" style="margin-top: 2%;margin-bottom: 5%">
		<div class="col-xs-1 col-xs-offset-2">
			<p style="">视频中心</p>
			<a>
				<div style="padding-top: 10%">新闻发布会</div>
			</a>
			<a>
				<div style="padding-top: 5%">发展历程</div>
			</a>
			<a>
				<div style="padding-top: 5%">直播</div>
			</a>
			<a>
				<div style="padding-top: 5%">员工视频</div>
			</a>
		</div>
		<div class="col-xs-1 ">
			<p style="">发现</p>
			<a>
				<div style="padding-top: 10%">成功故事</div>
			</a>
			<a>
				<div style="padding-top: 5%">公司年报</div>
			</a>
			<a>
				<div style="padding-top: 5%">管理层信息</div>
			</a>
			<a>
				<div style="padding-top: 5%">媒体图库</div>
			</a>
		</div>
		<div class="col-xs-1 ">
			<p style="">关注我们</p>
			<a>
				<div style="padding-top: 10%">新浪微博</div>
			</a>
			<a>
				<div style="padding-top: 5%">微信公众号</div>
			</a>
			<a>
				<div style="padding-top: 5%">优酷视频</div>
			</a>
			<a>
				<div style="padding-top: 5%">哔哩哔哩</div>
			</a>
		</div>
		<div class="col-xs-1 ">
			<a href="http://localhost/view-api/home2.html">商城主页</a>
		</div>

	</div>
</div>
</body>


<script type="text/javascript" charset="gb2312" language="javascript">


	const vue = new Vue({
		el: '#add_goods_vue',
		data: {
			goodsName: "",//商品名
			price: "",//价格
			count: "",//商品库存
			introduction: "",//商品介绍
			imgUrl: "",//商品展示
			type: "",//商品类型
			showImage: ""//图片展示

		},


		methods: {


			//submit
			saveReport: function () {
				let thisM = this;
				layer.msg("正在上传-------");
				$("#addImg").ajaxSubmit(function (data) {
					thisM.imgUrl = data;
					thisM.showImage = "http://localhost/views/view-admin/img/" + data;
					console.log("message" + data)
					thisM.$message({
						showClose: true,
						message: '恭喜你，上传成功',
						type: 'success'
					});
				});
				return false; // 必须返回false，否则表单会自己再做一次提交操作，并且页面跳转
			},


			//提交
			addGoods: function () {

				let url = "goods/addGoods";
				let thisM = this;
				console.log("imgUrl：" + this.imgUrl)
				let params = {
					goodsName: this.goodsName,
					price: this.price,
					count: this.count,
					introduction: this.introduction,
					imgUrl: this.imgUrl,
					type: this.type
				}
				postWithParams(url, params, function () {
					thisM.$message({
						showClose: true,
						message: '恭喜你，添加成功',
						type: 'success'
					});
				})
				console.log(this.goodsName);
			},

		},
		mounted: function () {
		}

	})
</script>
</html>
